<template>
	<div
    :class="[ activityInfo.status == 0 ? 'beforeStart': '', activityInfo.status == 2 ? 'finished' : '']"
    class="groupSolitaire">
    <div class="solitaire-user">
      <div class="avatar">
        <img :src="resData.head_img" alt="">
      </div>
      <span class="name">{{ resData.nick_name }}</span>
    </div>
    <div class="solitaire-top">
      <div v-if="activityInfo.status == 0" class="solitaire-top-time">
        <p class="time-info">
          距活动开始还剩：
          <span class="count">
            <count-down
              background="#fff"
              color="#F21228"
              type="2"
              :actEndTime="activityInfo.start_time"
              @finish="actStart"></count-down>
          </span>
        </p>
      </div>
      <div v-else-if="activityInfo.status == 1" class="solitaire-top-time">
        <p class="time-info">
          距活动结束还剩：
          <span class="count">
            <count-down
              background="#fff"
              color="#F21228"
              type="2"
              :actEndTime="activityInfo.end_time"
              @finish="actStart"></count-down>
          </span>
        </p>
      </div>
      <div v-else class="solitaire-top-time">
        <p class="time-info">
          活动已结束
        </p>
      </div>
      <div class="solitaire-top-con">
        <div class="tit">{{ activityInfo.title }}</div>
        <div class="con-wrap" :style="conStyle">
          <div class="con">{{ activityInfo.description }}</div>
        </div>
        
        <div class="show_more" v-if="conOverflow && conHide" @click="handleHideCon(1)"><div class="icon"></div><div class="txt">展开</div></div>
        <div class="hide_more" v-else-if="conOverflow && !conHide" @click="handleHideCon(2)"><div class="icon"></div><div class="txt">收起</div></div>
      </div>
    </div>
    <div class="solitaire-item">
      <div
        class="solitaire-item-wrap">
        <div
          v-for="(item, index) in goodsList"
          :key="index"
          class="solitaire-item-wrap-list">
          <div class="left-wrap" @click="handleClickLink(item.item_id)">
            <img :src="item.pic_url+'160x160'" alt="" v-if="item.is_compress==1">
            <img :src="item.pic_url" alt="" v-else>
          </div>
          <div class="right-wrap">
            <div class="right-wrap-title" @click="handleClickLink(item.item_id)">{{ item.title }}</div>
            <div class="right-wrap-progress">
              <div
                :style="`width: ${(item.buy_item / item.item_total)*100}%`"
                class="right-wrap-progress-bg"></div>
              <span class="right-wrap-progress-txt">已抢购{{ item.buy_item }}件</span>
            </div>
            <div class="right-wrap-user">
              <div class="right-wrap-user-avatar">
                <div
                  v-if="item.buy_info && index < 10"
                  class="img" v-for="(img, index) in item.buy_info.head_img">
                  <img :src="img" alt="">
                </div>
              </div>
              <div class="right-wrap-user-txt">{{ item.buy_num }}人已购买</div>
            </div>
            <div class="right-wrap-price">
              <div class="right-wrap-price-now"><span v-html="scaleGoodsPriceFn(item.price)"></span></div>
              <del class="right-wrap-price-origin">&yen;{{ item.original_price }}</del>
            </div>
            <div
              v-if="activityInfo.status == 0" class="add-icon"><img src="https://img.wifenxiao.com/h5-wfx/images/activity/icon_add2.png" alt=""></div>
            <div
              v-else-if="activityInfo.status == 1"
              @click="handleClickOpenSku(item.item_id)"
              class="add-icon"><img src="https://img.wifenxiao.com/h5-wfx/images/activity/icon_add.png" alt=""></div>
            <div
              v-else class="add-icon"><img src="https://img.wifenxiao.com/h5-wfx/images/activity/icon_add3.png" alt=""></div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="solitaire-other">
      <div class="solitaire-other-wrap">
        <div class="solitaire-other-wrap-title">
          <img src="https://img.wifenxiao.com/h5-wfx/images/activity/tit_left.png" alt="">
          <span class="tit">他们都在买</span>
          <img src="https://img.wifenxiao.com/h5-wfx/images/activity/tit_right.png" alt="">
        </div>
        
        <van-list
          v-model="loading"
          :immediate-check="true"
          :finished="finished"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          finished-text=""
          @load="onLoad">
          <div class="solitaire-other-wrap-user">
            <div
              v-for="(item, index) in otherList"
              :key="index"
              class="user-item">
              <div class="sort">{{ item.sort }}.</div>
              <div class="avatar"><img :src="item.head_img" alt=""></div>
              <div class="buy">
                <div class="buy-title">
                  <span class="name">{{ item.nick_name || '-' }}</span>
                  <span class="min fr">{{ item.pay_time }}</span>
                </div>
                <div class="buy-info" v-for="goods in item.item_info">
                  <span class="item">{{ goods.title }}</span>
                  <span class="num fr">+{{ goods.num }}</span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>

    <share-btn ref="shareBtns" :title="activityInfo.title" :poster_url="poster_url"></share-btn>
    
    <!-- 粉丝才能购买商家二维码弹窗 -->
    <shop-code ref="shopCode"></shop-code>
    <solitaire-btn ref="SolitaireBtn" :itemId="itemId"></solitaire-btn>

    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
  import ShopCode from '@/components/ShopCode'
  import countDown from './components/countDown'
  import shareBtn from './components/shareBtn'
  import solitaireBtn from './components/solitaireBtn'
  import small from '@/smallapp/small'
  import SmallLogin from '@/components/SmallLogin/smallLogin'
  import { mpShare } from '@/utils/utils'
  import { scaleGoodsPrice } from '@/utils/index'
  import { getActivityInfo, activityOtherBuy, solitaireActivityCard } from '@/api/item/activity'
  import Vue from 'vue'
  import { List } from 'vant'

  Vue.use(List)
  export default Vue.extend({
    name: 'index',
    data() {
      return {
        sendData:{},
        resData: {},
        goodsList: [],
        activityInfo: '',
        itemId: '',
        loading: false,
        finished: false,
        error: false,
        otherList: [],
        p: 1,
        poster_url: '',
        conOverflow: false, // 群接龙介绍超出
        conHide: true, // 群接龙介绍超出状态：false为展开状态，true为收起状态

        conMaxH: 95, // 群接龙介绍的最大高度
        conStyle: {
          maxHeight: '95px'
        } // 新购买记录
      }
    },
    components: {
      countDown,
      shareBtn,
      solitaireBtn,
      ShopCode,
      SmallLogin
    },
    methods: {
      onLoad() {
        this.activityOtherBuyFn()
      },
      handleClickLink(id) {
        if (this.activityInfo.status != 1) {
          return false
        }
        this.$JumpName(this, 'item-detail', { detailId: id, activity_type: 'solitaire', activity_id: this.$route.query.activity_id })
      },
      // 获取活动信息
      getActivityInfoFn() {
        const param = {}
        param.activity_id = this.sendData.activity_id
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
        getActivityInfo(param).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            const resData = res.data
            this.resData = resData
            this.activityInfo = resData.activity_info
            this.goodsList = resData.goods_list
            this.poster_url = resData.poster_url
            document.title = resData.activity_info.title
            const sid = small.globalData.shopId
            const pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'
            param.x = 0
            param.y = 0
            param.width = 200
            param.height = 168
            solitaireActivityCard(param).then(res => {
              const option = {
                title: resData.jsapi_title,
                imgUrl: resData.jsapi_img,
                shareParam: `sid=${sid}&pid=${pid}&activity_id=${this.sendData.activity_id}`,
              }
              mpShare (true, true, '/goods/pages/groupSolitaire/index', option)
            })
            wx.setNavigationBarTitle({
              title: resData.activity_info.title
            })
            const that = this
            this.$nextTick(() => {
              // 获取dom高度
              document.querySelector('.con-wrap .con').$$getBoundingClientRect().then(res => {
                const conHeight=res.height
                that.conOverflow = conHeight - that.conMaxH > 0
              })
            })
          } else {
            this.$Error(res.msg)
          }
        })
      },
      // 群接龙介绍的显示隐藏
      handleHideCon(type) {
        this.conHide = !this.conHide
        // type为1为显示
        if (type == 1) {
          this.conStyle.maxHeight = 'none'
        } else {
          this.conStyle.maxHeight = this.conMaxH + 'px'
        }
      },
  
      // 打开sku弹层
      handleClickOpenSku(id) {
        const buy_need_fans = this.$store.getters.wxConfig.buy_need_fans
        const that = this
        if (buy_need_fans == 1) {
          that.$isFans(() => {
            that.$Error('请先等待商家绑定公众号')
            return false
          }, () => {
            that.$refs.shopCode.dialogVisible = true
            return false
          }, () => {
            // 打开sku弹窗
            that.$refs.SolitaireBtn.skuDialogVisible = true
            that.itemId = id
          })
        } else {
          that.$refs.SolitaireBtn.skuDialogVisible = true
          that.itemId = id
        }
      },
      // 活动开始
      actStart() {
        this.getActivityInfoFn()
        this.getCartDataFn()
      },
      // 价格展示
      scaleGoodsPriceFn(price) {
        return scaleGoodsPrice(price, 'large')
      },
      // 其他人购买
      activityOtherBuyFn() {
        const param = {}
        param.activity_id = this.sendData.activity_id
        param.p = this.p
        activityOtherBuy(param).then(res => {
          // 加载状态结束
          this.loading = false
          if (res.status == 1) {
            this.otherList.push(...res.data.list)
            if (res.data.list.length < 10) {
              this.finished = true
            }
            this.p++
          }
        })
      }
    },
    mounted() {
      // 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
      window.addEventListener('wxload', query => {
          this.sendData.activity_id = query.activity_id || this.$route.query.activity_id
          small.HandleShareParams()
          this.getActivityInfoFn()
          this.onLoad()
      })
      window.addEventListener('wxshow', () => {
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
        }
      })
      window.$$subscribe('loginReload', reload => {
          if (reload) {
            this.getActivityInfoFn()
          }
      })
    },
  })
</script>

<style lang="scss">
  @import 'src/styles/mixin';
  .miniprogram-root{
    .van-overlay {
      z-index: 99;
    }
  }
  .groupSolitaire{
    padding-bottom: 110px;
    .solitaire-user{
      padding: 16px 30px;
      background: #fff;
      .avatar{
        width: 60px;
        height: 60px;
        display: inline-block;
        border-radius: 50%;
        overflow: hidden;
        img{
          width: 100%;
        }
      }
      .name{
        height: 60px;
        line-height: 60px;
        color: #333333;
        font-size: 28px;
        vertical-align: top;
        margin-left: 15px;
      }
    }
    .solitaire-top{
      width: 100%;
      background: url('https://img.wifenxiao.com/h5-wfx/images/user/member/user_style3_bg_black.png') top no-repeat;
      background-size:100% 260px;
      &-time{
        height: 95px;
        line-height: 95px;
        text-align: center;
        color: #fff;
        .count{
          display: inline-block;
        }
      }
      &-con{
        width: 700px;
        margin: 0 auto;
        background: #fff;
        border-radius: 20px;
        padding: 34px;
        position: relative;
        .tit{
          color: #333;
          font-size: 32px;
          font-weight: bold;
          margin-bottom: 28px;
          height: 29px;
        }
        .con-wrap{
          overflow:hidden;
        }
        .con{
          line-height: 38px;
          font-size: 26px;
          color: #666;
          white-space: pre-line;
        }
        .show_more,.hide_more{
          margin-top:14px;
          text-align:center;
          color:#EA030B;
          .icon{
            width:12px;
            height:20px;
            margin:0 auto;
            transform: rotate(90deg);
            background: url('https://img.wifenxiao.com/h5-wfx/images/arrow-red.png') no-repeat;
            background-size:100% 100%;
          }
          .txt{
            margin-top:8px;
          }
          &.hide_more{
            .icon{
              transform: rotate(270deg);
            }
          }
        }
      }
    }
    .solitaire-item{
      padding: 0 25px;
      margin-top: 15px;
      &-wrap{
        background: #fff;
        border-radius: 20px;
        padding: 0 30px;
        &-list{
          padding: 30px 0;
          border-bottom: 1px solid #EDEDED;
          &:last-child{
            border: none;
          }
          font-size: 0;
          .left-wrap{
            width: 226px;
            height: 226px;
            border-radius: 12px;
            overflow: hidden;
            background: #ddd;
            @include alignTop;
            img{
              width: 100%;
            }
          }
          .right-wrap{
            width: calc(100% - 226px);
            font-size: 24px;
            padding-left: 20px;
            position: relative;
            @include alignTop;
            &-title{
              font-size: 26px;
              line-height: 36px;
              color: #333;
            }
            &-progress{
              margin: 20px 0;
              width: 260px;
              height: 30px;
              line-height: 30px;
              background: #FFE9E9;
              border-radius: 20px;
              color: #fff;
              font-size: 20px;
              position: relative;
              overflow: hidden;
              &-txt{
                margin-left: 20px;
                position: relative;
                z-index: 1;
              }
              &-bg{
                position: absolute;
                left: 0;
                top: 0;
                width: 100px;
                height: 30px;
                border-radius: 20px;
                background: #FF0000;
              }
            }
            &-user{
              margin-bottom: 14px;
              &-avatar{
                @include alignTop;
                margin-right: 20px;
                .img{
                  width: 38px;
                  height: 38px;
                  background: #D5D5D5;
                  border: 1px solid #FFFFFF;
                  border-radius: 50%;
                  overflow: hidden;
                  margin-right: -15px;
                  @include alignTop;
                  img{
                    width: 100%;
                  }
                }
              }
              &-txt{
                height: 38px;
                line-height: 38px;
                color: #666;
                font-size: 22px;
              }
            }
            &-price{
              &-now{
                @include alignTop;
              }
              &-origin{
                display: inline-block;
                vertical-align: bottom;
                color: #999999;
                font-size: 22px;
              }
            }
            .add-icon{
              position: absolute;
              right: 0;
              bottom: 30px;
              width: 50px;
              height: 50px;
              img{
                width: 100%;
              }
            }
          }
        }
      }
    }
    .solitaire-other{
      padding: 16px 30px;
      margin-top: 15px;
      &-wrap{
        background: #fff;
        border-radius: 20px;
        padding: 0 30px;
        &-title{
          text-align: center;
          padding: 30px 0;
          img{
            width: 120px;
          }
          .tit{
            color: #333;
            font-size: 32px;
            font-weight: bold;
            margin: 0 20px;
          }
        }
        &-user{
          .user-item{
            border-top:1px solid #EDEDED;
            padding: 28px 0;
            display: flex;
            .sort{
              flex: 60px 0 0;
              line-height: 56px;
              text-align: right;
            }
            .avatar{
              width: 56px;
              height: 56px;
              margin: 0 12px;
              overflow: hidden;
              border-radius: 50%;
              img{
                width: 100%;
              }
            }
            .buy{
              flex: 1;
              .buy-title{
                .name{
                  display: inline-block;
                  width: 370px;
                  line-height: 54px;
                  color: #333;
                  font-size: 24px;
                  font-weight: bold;
                  @include showEllipsis;
                }
                .min{
                  line-height: 54px;
                }
              }
              .buy-info{
                .item{
                  font-size: 20px;
                  display: inline-block;
                  width: 390px;
                  color: #666;
                  @include showEllipsis;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
